<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app" style="padding-bottom: 200px">
    <h3>带label的输入框</h3>
    <label style="display: inline-block; width:100px">用户名:</label><input type="text"><br>
    <label style="display: inline-block; width:100px">密码:</label><input>

    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" prompt="请输入密码"></myinput>

    <h3>自动生成选项的下拉框</h3>
    <select>
        <option>初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select>

<!--    ref用于定义组件变量名-->
    <myselect :items="eduItems" label="学历" ref="myslt"
              v-on:reset-color="resetColor"></myselect>

    <input v-model="color">
    <button @click="setColor">设置背景色</button>

</div>
<script>
    //注册组件
    Vue.component("myinput", {
        //template内部元素,必须是 单 根节点
        template: `
      <div style="padding: 5px">
           <label style="display: inline-block;"
                  :style="{width:this.labelWidth || '100px'}" >
                  {{label}} :
           </label>
           <input :placeholder="placeholder">
      </div>
      `,
        // 定义组件属性,定义同样不能用驼峰命名法,使用时vue回转成驼峰命名
        //vue组件属性,是只读的
        pros: ["label", "label-width", "prompt"],
        //数据模型
        data() {
            return {
                placeholder: null
            };
        },
        created() {
            this.placeholder = this.prompt || "请输入";
        },
        methods: {}
    })

    Vue.component("myselect", {
            //props 对象语法 ,可以限定属性的数据类型,和验证规则
            props: {
                label: String,//限定字符串类型
                item: Array  //限定Items必须是数组
            },
            template: `
            <select>
                <option v-for="item,i in items">{{i}}-{{item}}</option>
            </select>
        `,
        }
    )
    var v = new Vue({
        el: "#app",
        data: {
            eduItems: ["初中", "高中", "专科", "大学"]
        }
    })
</script>
</body>
</html>